<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../js/dist/APlayer.min.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
	</head>
	<style>
		.main {
			position: relative;
		}
		
		.mui-bar-nav {
			-webkit-box-shadow: none;
			box-shadow: none;
			background: none;
		}
		
		.mui-title,
		.mui-icon-left-nav {
			color: #fff;
		}
		
		.mui-content {
			width: 100%;
			background: url(../../imges/283974360740381381.png);
			background-size: cover;
		}
		
		.aplayer .aplayer-lrc {
			height: 50% !important;
		}
		
		.information {
			position: fixed;
			bottom: 104px;
			display: flex;
			text-align: center;
			right: 12px;
			transition: .2s;
		}
		
		.information>div {
			padding: 0 12px;
		}
		
		.frequency_text,
		.average_text {
			font-size: 12px;
			color: #62A0E2;
		}
		
		.operation {
			position: fixed;
			bottom: 24px;
			display: flex;
			width: 100%;
			padding: 0 24px;
			transition: .3s;
		}
		
		.operation>div {
			flex: 1;
			border-radius: 50px;
			overflow: hidden;
			margin-right: 24px;
		}
		
		.mui-btn-outlined.mui-btn-blue,
		.mui-btn-outlined.mui-btn-primary {
			color: #fff;
			border-color: #84A4DF;
		}
		
		.operation>div:last-child {
			background: #34d498;
			margin: 0;
		}
		
		.operation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.countdown {
			position: fixed;
			top: 50%;
			left: 50%;
			text-align: center;
			margin-left: -46px;
			margin-top: -60px;
			font-size: 60px;
			transition: .5s;
		}
		
		.countdown_opacity {
			border-radius: 50%;
			width: 92px;
			height: 92px;
			background: #fff;
			opacity: 0.5;
		}
		
		.countdown_num {
			position: absolute;
			top: 0;
			width: 92px;
			height: 92px;
			line-height: 92px;
			color: #fff;
		}
		
		.countdown_text {
			position: fixed;
			bottom: 84px;
			color: #71AAE6;
			width: 100%;
			text-align: center;
		}
		
		.countdown_time {
			margin-top: 20px;
		}
		
		.resultoperation {
			display: flex;
			padding: 0 24px;
			position: absolute;
			width: 100%;
			bottom: 24px;
		}
		
		.mui-btn-warning,
		.mui-btn-yellow {
			background: #FFA21A;
		}
		
		.resultoperation>button:first-child {
			margin-right: 24px;
		}
		
		.resultoperation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.result {
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
			text-align: center;
			border-radius: 8px 8px 0 0;
			height: 44%;
			font-size: 12px;
			color: #B2B2B2;
			transition: .3s;
			padding-top: 24%;
		}
		
		.score {
			margin: 12% 0px;
		}
		
		.score_num {
			font-size: 30px;
			color: #F87171;
			margin-bottom: 8px;
		}
		
		.play {
			position: absolute;
			top: -46px;
			width: 100%;
			display: flex;
			padding: 0 16px;
		}
		
		.progress {
			flex: 1;
		}
		
		.progress>div {
			width: 80%;
			height: 2px;
			background: #6A9EDC;
			margin: 20px auto;
		}
		
		.play>div {
			display: inline-block;
		}
		
		.planzantin,
		.broadcasts,
		.resume {
			width: 40px;
		}
		
		.play .planzantin,
		.play .resume {
			display: none;
		}
		
		.planzantin>img,
		.broadcasts>img,
		.resume>img {
			width: 100%;
		}
		
		.plan_time {
			color: #fff;
			line-height: 40px;
			position: absolute;
			right: 16px;
		}
		
		.bombbox {
			position: fixed;
			width: 290px;
			z-index: 2000;
			top: 50%;
			left: 50%;
			margin-top: -25%;
			margin-left: -145px;
		}
		
		.bombbox img {
			width: 100%;
			vertical-align: middle;
			height: 100%;
		}
		
		.bombbox_img {
			height: 138px;
		}
		
		.success_data {
			position: absolute;
			top: 16px;
			right: 20px;
			text-align: center;
		}
		
		.integral {
			margin: 8% 0;
			color: #B2B2B2;
		}
		
		.determine {
			width: 122px;
		}
		
		.determine>button {
			width: 100%;
		}
		
		@media screen and (max-height:480px) {
			.aplayer .aplayer-lrc {
				height: 40px !important;
			}
			.countdown_time {
				margin-top: 20px;
			}
			.countdown_text {
				bottom: 60px;
			}
			.score {
				margin: 6% 0;
			}
		}
		/*发布成功弹窗*/
		
		.success {
			display: none;
		}
		/*录制结果的下弹窗*/
		
		.result {
			bottom: -100%;
		}
		/*倒计时*/
		
		.countdown_text {
			transform: translate(0%);
			transition: .3s;
			font-size: 14px;
		}
		/*听听范例开始朗读*/
		
		.operation {
			/*display: none;*/
		}
		/*音频*/
		/*.aplayer-author {
			display: none;
		}
		*/
		/*.aplayer-music {
			display: none;
		}
		*/
		
		.aplayer .aplayer-info .aplayer-controller {
			position: fixed !important;
			bottom: 20px;
			left: 0;
			width: 90%;
			z-index: 100;
			margin-left: 5%;
			transform: translate(-120%);
			transition: .3s;
			padding: 40px 0 14px 0;
		}
		
		.aplayer {
			box-shadow: none;
			margin: 0;
		}
		/*自带播放*/
		
		.aplayer-pic {
			display: none;
		}
		
		.aplayer-withlrc.aplayer .aplayer-info {
			margin: 0;
			height: initial !important;
			padding: 10px 0;
		}
		
		.aplayer .aplayer-lrc {
			background: none;
			padding: 34% 0;
			margin: 10% 0 0!important;
			transition: .3s;
		}
		
		.aplayer .aplayer-lrc p {
			color: #fff !important;
			font-size: 16px !important;
			line-height: 30px!important;
			height: 30px!important;
		}
		
		.aplayer-bar-wrap {
			margin: 0 70px 0 70px !important;
			position: relative;
			z-index: 4000;
		}
		
		.mask {
			position: absolute;
			height: 72px;
			top: 0px;
			width: 100%;
		}
		
		.mask img {
			width: 100%;
			height: 100%;
		}
		
		.close {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 10px;
			left: 12px;
			border-radius: 50%;
		}
		
		.suspend {
			background: url("../../imges/zantin.png")no-repeat 8px 6px;
			background-size: 34px;
			display: none;
		}
		
		.broadcast {
			background: url("../../imges/ggGroup 1492.png");
			background-size: cover;
		}
		
		.close>img,
		.state>img {
			width: 100%;
		}
		
		.state {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 10px;
			background: url("../../imges/Group 1492remo.png");
			background-size: cover;
			right: 12px;
			border-radius: 50%;
		}
		
		.aplayer-played {
			background: #fff !important;
		}
		
		.aplayer .aplayer-lrc p.aplayer-lrc-current {
			transform: scale(1.1, 1.1);
			transition: .2s;
		}
		
		.aplayer-time {
			position: absolute !important;
			top: 16px;
			right: 70px !important;
			color: #fff !important;
		}
		
		.aplayer-withlrc.aplayer .aplayer-lrc {
			transform: translate(-100%);
			transition: 0.3s;
		}
		
		.countdown_time {
			transform: translate(-100%);
			transition: .3s;
		}
		
		.fraction {
			font-size: 30px;
			vertical-align: middle;
			font-weight: 600;
			color: #FFA21A;
			margin-right: 6px;
		}
		
		.aplayheade {
			overflow: hidden;
		}
	</style>

	<body>

		<div class="main">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title"></h1>
			</header>
			<div class="mui-content">
				<!--<div class="song">
					<div>
						<div>解落三秋叶</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>花落知多少</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
						<div>花落知多少</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
					</div>
				</div>-->
				<div class="aplayheade">
					<div id="player3" class="aplayer"></div>
				</div>
			</div>
			<!--<div class="information">
				<div class="frequency">
					<div class="frequency_num">0</div>
					<div class="frequency_text">读过人次</div>
				</div>
				<div class="average">
					<div class="average_num">0</div>
					<div class="average_text">平均分</div>
				</div>
			</div>-->
			<!--<div class="operation">
				<div><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined example">听听范例</button></div>
				<div class="start"><button type="button" class="mui-btn mui-btn-success">开始朗读</button></div>
			</div>-->
			<div class="countdown">
				<div class="countdown_opacity"></div>
				<div class="countdown_num">3</div>
			</div>

			<div class="countdown_text">
				<div class="down_text">倒计时..</div>
				<div class="countdown_time"><span class="timing">00:00</span>/<span class="totaltime">00:00</span></div>
			</div>

			<div class="result">
				<div class="play">
					<div class="planzantin"><img src="../../imges/zantin.png" /></div>
					<div class="broadcasts"><img src="../../imges/Group 1430.png" /></div>
					<div class="resume"><img src="../../imges/Group 1430.png" /></div>
					<div class="progress" style="display: none;">
						<div></div>
					</div>
					<div class="plan_time">00:00</div>
				</div>
				<!--<div class="score">
					<div class="score_num">97</div>
					<div>得分</div>
				</div>-->
				<div>
					<!--<div>您在全星球平均得分为97分，</div>
					<div>打败了全国98%的小学生！</div>-->
					<div style="width: 50%;margin: 0 auto;">
						打分系统正在欣赏你的朗读作品，请耐心等一等哟
					</div>
				</div>
				<div class="resultoperation">
					<button type="button" class="mui-btn mui-btn-warning recording">重新录制</button>
					<button type="button" class="mui-btn mui-btn-primary release">发布</button>
				</div>
			</div>

			<div class="success">
				<div class="mui-backdrop"></div>
				<div class="bombbox">
					<div class="bombbox_img"><img src="../../imges/Group 1010.png" /></div>
					<div class="success_data">
						<div>恭喜你发布成功！</div>
						<div class="integral"><span class="fraction">+5</span>积分</div>
						<div class="determine"><button type="button" class="mui-btn mui-btn-success">确定</button></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/libs/aplayer.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init()
			document.addEventListener("plusready", onPlusReady, false);

			var r = null;
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				//				console.log(obj.plancaseuid)
				//console.log(obj.plancaseuid)
				$(".mui-content").height($(window).height())

				$(".aplayheade").height($(".mui-content").height() - 200)
				r = plus.audio.getRecorder();
				common.ajax("student/reading/queryPage", {
					uid: common.uid,
					token: common.token,
					caseUid: obj.caseuid
				}, function(data) {
					if(data.code == 200) {
						var tex = plus.audio.createPlayer(data.data.soundTrackUrl);
						tex.setRoute(plus.audio.ROUTE_SPEAKER)
						muisrc(data)
						$(".main").attr("uid", data.data.uid)
						$(".mui-title").text(data.data.caseName)
					} else {
						mui.toast(data.message)
					}
				}, "get")

				function muisrc(data) {
					if(data.data.totalTimeStr == "" || data.data.totalTimeStr == "00:00") {
						mui.back()
						return
					}
					$(".totaltime").text(data.data.totalTimeStr)
					//				console.log(data)
					var time = []
					$.each(data.data.caseTimeList, function(e, a) {
						if(data.length = 4) {
							a = "0" + a
						}
						time.push(a.split(".").join(":") + '.00')
					})

					var temp = ""
					for(var i = 0; i < data.data.caseLycList.length; i++) {
						temp += '[' + time[i] + ']' + data.data.caseLycList[i] + "\n"
					}
					var ap3 = new APlayer({
						element: document.getElementById('player3'),
						narrow: false,
						autoplay: false,
						showlrc: 1,
						mutex: true,
						theme: '#615754',
						preload: 'metadata',
						mode: 'circulation',
						music: {
							title: data.data.caseName,
							author: '',
							url: data.data.soundTrackUrl,
							pic: '',
							lrc: temp
						}
					});
					var num = 4
					dowmTime()

					function dowmTime() {
						--num
						$(".countdown_num").text(num)
						if(num <= 0) {
							$(".down_text").text("录制中..")
							$(".countdown_time").css("transform", "translate(0)")
							$(".countdown").css("transform", "translate(300%)")
							$(".aplayer-lrc").css("transform", "translate(0)")
							ap3.audio.currentTime = 0
							ap3.play()
							startRecord()
							return
						}
						setTimeout(dowmTime, 1000)
					}
					ap3.on('playing', function() {
						if($(".timing").text() >= $(".totaltime").text()) {
							$(".result").css("bottom", "0")
							$(".timing").text("00:00")
							ap3.audio.currentTime = 0
							ap3.pause()
							r.stop();
							tapeplay()
							return
						}
						$(".plan_time").text($(".aplayer-ptime").text())
						$(".timing").text($(".aplayer-ptime").text())
					});

					function tapeplay() {
						var kaiguan = false
						var p = ""
						//						p.setRoute(plus.audio.ROUTE_SPEAKER)
						$(".broadcasts").on("tap", function() {
							if(kaiguan) {
								return
							}
							kaiguan = true
							p = plus.audio.createPlayer("_doc/audio/test.amr");
							ap3.audio.currentTime = 0
							ap3.play()
							p.setRoute(plus.audio.ROUTE_SPEAKER)
							if(plus.audio == undefined) {
								mui.toast("Device not ready!");
							}
							ap3.volume(0)
							p.play(function() {
								kaiguan = false
								p.stop()
								$(".broadcasts").show()
								$(".planzantin").hide()
							});
							$(this).hide()
							$(".planzantin").show()
							return p
						})
						var success = false
						$(".release").on("tap", function() {
							if(success) {
								return
							}
							ap3.pause()
							if(p != "") {
								p.pause()
							}
							var wt = plus.nativeUI.showWaiting()
							success = true
							var task = plus.uploader.createUpload(common.urls + "student/reading/publish", {
									method: "POST",
									//						blocksize: 204800,
									//						priority: 100
								},
								function(t, status) {
									// 上传完成
									if(status == 200) {
										/*mui.toast("发布成功")*/
										$(".success").css("display", "block")
									} else {
										success = false
										alert("Upload failed: " + status);
									}
									wt.close()
								}
							);
							task.addFile("_doc/audio/test.amr", {
								key: "file"
							});
							task.addData('uid', common.uid);
							task.addData('token', common.token);
							task.addData('readingPlanCaseUid', obj.plancaseuid);
							task.addData("caseUid", obj.caseuid)
							//task.addEventListener( "statechanged", onStateChanged, false );
							task.start();
							//						console.log(obj.plancaseuid)
						})
						$(".recording").on("tap", function() {
							p.stop();
							ap3.pause()
							location.reload();
						})
						$(".planzantin").on("tap", function() {
							ap3.pause()
							p.pause()
							$(this).hide()
							$(".resume").show()
						})
						$(".resume").on("tap", function() {
							ap3.play()
							p.resume()
							$(this).hide()
							$(".planzantin").show()
						})
					}

					var old_back = mui.back;
					mui.back = function() {
						ap3.pause()
						r.stop();
						old_back()
					}
				}

				function startRecord() {
					if(r == null) {
						console.log("Device not ready!");
						return;
					}
					r.record({
						filename: "_doc/audio/test.amr",
						format: "amr"
					}, function(e) {
						r.stop();
						console.log(e)
						//						console.log("Audio record success!");
					}, function(e) {
						console.log("Audio record failed: " + e.message);
					});
				}
				$(".determine").on("tap", function() {
					var list = plus.webview.currentWebview("teacherreads.html").opener();
					mui.fire(list, 'teacherreads');
					mui.back()
				})
			}
		</script>
	</body>

</html>